<template>
  <div class="cloudBox">
    <div v-for="item in monthRules">
      <div class="title">
        <span>{{item.parkName}}</span>
        <span class="parkingTitle">包月规则数量： <span style="font-weight: bold;">{{item.ruleCount}}</span></span>
        <span>拥有月租车量： <span class="carNum" @click="showDetails = true;goDelaites(item)">{{item.carCount}}</span></span>
      </div>
      <el-table :data="item.monthRuleList" size="mini" border style="margin-bottom: 20px;">
        <el-table-column label="规则名称" prop="ruleName" align="center" fixed></el-table-column>
        <el-table-column label="免费时段" prop="" align="center" fixed></el-table-column>
        <el-table-column label="1个月" prop="oneMonth" align="center"></el-table-column>
        <el-table-column label="2个月" prop="twoMonth" align="center"></el-table-column>
        <el-table-column label="3个月" prop="threeMonth" align="center"></el-table-column>
        <el-table-column label="4个月" prop="fourMonth" align="center"></el-table-column>
        <el-table-column label="5个月" prop="fiveMonth" align="center"></el-table-column>
        <el-table-column label="6个月" prop="sixMonth" align="center"></el-table-column>
        <el-table-column label="7个月" prop="sevenMonth" align="center"></el-table-column>
        <el-table-column label="8个月" prop="eightMonth" align="center"></el-table-column>
        <el-table-column label="9个月" prop="nineMonth" align="center"></el-table-column>
        <el-table-column label="10个月" prop="tenMonth" align="center"></el-table-column>
        <el-table-column label="11个月" prop="elevenMonth" align="center"></el-table-column>
        <el-table-column label="12个月" prop="twelveMonth" align="center"></el-table-column>
        <el-table-column label="展示状态" align="center" fixed="right">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="showDetails" width="700px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-tabs v-model="activeName" style="height: 100%;" @tab-click="handleClick">
        <el-tab-pane style="height: 100%;" label="月租车详情" name="first">
          <Delaites :id=id name="first" v-if="showDetails" @closeDialog="showDetails = false"/>
        </el-tab-pane>
        <el-tab-pane style="height: 100%;" label="历史月租记录" name="second">
          <historyRecordes :id=id name="second" v-if="showDetails" @closeDialog="showDetails = false"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>


  </div>
</template>

<script>
  import Delaites from './components/carNumDelaites.vue'
  import historyRecordes from './components/historyRecordes.vue'

  export default {
    name: 'cloudBox',
    components: { Delaites , historyRecordes },
    data() {
      return {
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        monthRules: [],
        showDetails: false,
        activeName: 'first',
        id:null
      }
    },
    mounted() {
      this.getMWMonthRule();
    },
    methods: {
      getMWMonthRule() {
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule/getMWMonthRule',
          data: this.searchForm
        }).then((res) => {
         res.data.records.forEach(item => {
           if(item.monthRuleList) {
             item.monthRuleList.forEach(item => {
               item.status = item.status == '1' ? true: false
             })
           }
         })
         this.monthRules = res.data.records;
        })
      },
      switchStatus(e) {
        const status = e.status == true ? 'OPEN' : 'CLOSE';
        this.$axios({
          method: 'post',
          url: '/promotion/month-rule/switchStatus',
          data: this.$qs.stringify({ id: e.id, status: status })
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('规则状态修改成功！')
            this.getMWMonthRule();
          } else {
            this.$message.warning('规则状态修改失败！')
          }
        })
      },
      goDelaites(item) {
        this.id = item.id;
      },
      handleClick() {

      }
    }
  }
</script>

<style scoped>
  .title {
    background-image: linear-gradient(to right, rgb(228,228,228) , #ccc);
    padding: 4px;
    font-size: 14px;
    padding-left: 20px;
  }
  .parkingTitle {
    display: inline-block;
    padding: 6px 20px;
    margin: 0 20px;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
  }
  .carNum {
    color: #1890FF;
    font-weight: bold;
  }
  .carNum:hover {
    cursor: pointer;
  }




</style>
